;(function($){
    "use strict";
    // console.log($);
    //不需要操作DOM的功能
    // $.xxx= function(){
    //     console.log("自定义的方法1");
    // }
    // $.extend({
    //     xxx:function(){
    //         console.log("自定义的方法2")
    //     }
    // })
     //需要操作DOM的功能
    // $.fn.xxx=function(){
    //     console.log("自定义的方法3");
    // }
    // $.fn.extend({
    //     xxx:function(){
    //         console.log("自定义的方法4")
    //     }
    // })
    // $.extend($.fn,{
    //     xxx:function(){
    //         console.log("自定义的方法5")
    //     }
    // })
    $.fn.banner=function(data,ops={}){
        //1.处理参数
        let {
            btn = true,
            list = true,
            autoPlay= true,
            delayTime = 3000,
            moveTime = 300,
            index=0,
            currentClass = "active"
        }=ops;
        let prev;
        const that=this;
        //2.根据数据，渲染页面结构
        //图片
        init();
        function init(){
            let str="";
            $.each(data,(idx,val)=>{
                str+=` <img src="${val.src}" alt="${val.alt}">`
            })
            $(" <div class='imgbox'> "+ str + "</div>").appendTo(that);
        }

        //左右按钮切换轮播图

        if(btn){
            $("<div  id='left'>&lt;</div>").appendTo($("<div class='btn'></div>").appendTo(this)).parent().append($("<div  id='right'>&gt;</div>")).children("#left").click(leftClick).end().children("#right").click(rightClick)
        }
        function leftClick(){
            if(index===0){
                index =data.length-1;
                prev=0;
            }else{
                index--;
                prev=index+1;
            }
            move(prev ,index,-1)
        }
        function rightClick(){
            if(index === data.length-1){
                index = 0;
                prev = data.length-1;
            }else{
                index++;
                prev = index-1
            };
            move(prev,index,1)
        }
        //4.分页器切换轮播图
        if(list){
            //渲染页面结构并绑定事件
            let str = "";
            $.each(data,idx =>{
                str += ' <li></li>';
            });
            $("<div class='list'>"+str+"</div>").appendTo(this).children("li").eq(index).addClass(currentClass).end().click(function(){
                if($(this).index() > index){
                    // console.log("左");
                    move(index,$(this).index(),1)
                }
                if($(this).index() < index){
                    // console.log("右");
                    move(index,$(this).index(), -1)
                }
                //当前点击的就是下一次要走的
                index = $(this).index();
            })
        }

        //5.自动播放
        if(autoPlay){
            let t = setInterval(()=>{
                rightClick()
            },delayTime);
            this.hover(function(){
                clearInterval(t)
            },function(){
                t = setInterval(()=>{
                    rightClick()
                },delayTime);
            })

        }




        function move(prev ,next ,d){
            //先设置要走的图片的默认位置
            //开始走
            //再设置要进来的图片的默认位置
            //开始进来
            that.children(".imgbox").children().eq(prev).css({
                left:0
            }).stop().animate({
                left:-that.children(".imgbox").children().eq(0).width()*d        
            },moveTime).end().eq(next).css({
                left:that.children(".imgbox").children().eq(0).width()*d
            }).stop().animate({
                left:0
            },moveTime)

            that.children(".list").children("div").eq(next).addClass(currentClass).siblings().removeClass(currentClass)
        }


    }
})(jQuery);